import Taro, { Component } from '@tarojs/taro'
import { View, Image} from '@tarojs/components'
import styles from './index.module.less'

export default class CardList extends Component {

    render() {
        const { 
                img = 'https://img.yzcdn.cn/upload_files/2020/03/10/FlZcR9XXMuIY1mCKtSLWLioBX6zo.png!small.png', 
                type = 'audio',
                title = '0-3岁，家庭中必不可少的感官教育的感官教育的感官教育', 
                subTitle = '蒙氏家庭0-3', 
                metas = ['03-21', '50次学习', '非常好'] 
            } = this.props
        const coverTag = type === 'audio' ? '' : ''
        return (
            <View className={styles.item}>
                <View className={styles.cover}>
                    <Image className={styles.coverImage} src={img} mode='scaleToFill'></Image>
                    <Image className={styles.coverTag} src={coverTag}></Image>
                </View>
                <View className={styles.text}>
                    <View className={styles.title}>
                        {title}
                    </View>
                    <View className={styles.subTitle}>
                        {subTitle}
                    </View>
                    <View className={styles.metas}>
                        {metas.map((item, index)=><View className={styles.meta} key={index}>{item}</View>)}
                    </View>
                </View>
            </View>
        )
    }
}
